<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>专题分类</title>
</head>

<body>
    <div id="classify" class="center" v-if="classify">
        <!-- 左侧导航栏 -->
        <div class="leftNav">
            <ul>
                <li v-for="(c, index) in classify" v-if="index == 0" class="active">
                    <a href="#">{{c.name}}</a>
                </li>
                <li v-else>
                    <a href="#">{{c.name}}</a>
                </li>
            </ul>
        </div>
        <!-- 右侧文章列表 -->
        <div th:include="listArticle"></div>
        <!-- 专题简介 -->
        <div class="profile">
            <!-- 专题头部 -->
            <div class="center" v-if="classify">
                <div class="headImage" :style="{'background-image':'url('+classify[showIndex].image+')'}">
                    <span class="large">{{classify[showIndex].name}}</span>
                </div>
            </div>
            <div class="center small gray" style="margin: 36px auto;">
                收录了{{classify[showIndex].articles}}篇文章
                {{classify[showIndex].fans}}人关注
            </div>
            <!-- 专题描述 -->
            <div>
                <p class="center large">专题公告</p>
                <p id="description" class="gray">{{classify[showIndex].description}}</p>
            </div>
        </div>
    </div>
    <script src="/js/classify.js"></script>
    <link rel="stylesheet" href="/css/classify.css">
</body>

</html>